import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/components/cupertino_picker_ext.dart';
import 'package:share_fit/app/controllers/home/cycle_calendar/cycle_calendar_setting/logic.dart';
import 'package:share_fit/app/controllers/home/home_const.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

class CycleCalendarSettingPage extends StatelessWidget {
  CycleCalendarSettingPage({super.key});

  final logic = Get.put(CycleCalendarSettingLogic());
  final state = Get.find<CycleCalendarSettingLogic>().state;

  @override
  Widget build(BuildContext context) {
    logic.initSelectionItem();

    return PopScope(
      canPop: false,
      onPopInvoked: (didPop) => logic.onPopInvoked(didPop),
      child: Scaffold(
        appBar: AppBar(
          leading: BackBtnIcon(onTap: () => logic.gotoCycleCalendarPage()),
          centerTitle: true,
          title: Text(LocaleKeys.cycle_calendar_setting_text.ts, style: TextStyle(fontSize: 54.sp)),
        ),
        body: Container(
          padding: EdgeInsets.symmetric(horizontal: 40.w),
          child: Theme(
            data: ThemeData(),
            child: ListView(
              children: [
                SizedBox(height: 90.h),
                Container(
                  decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.circular(60.r)),
                  child: ListTile(
                    leading: SizedBox(
                      width: 650.w,
                      height: 170.h,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(LocaleKeys.cycle_calendar_device_remind.ts, style: TextStyle(fontSize: 42.sp)),
                          Text(LocaleKeys.cycle_calendar_device_remind_tip.ts,
                              style: TextStyle(fontSize: 30.sp, color: Colors.grey, overflow: TextOverflow.ellipsis), maxLines: 2),
                        ],
                      ),
                    ),
                    trailing: GetBuilder<CycleCalendarSettingLogic>(
                      id: HomeConst.cycleCalendarEnableRemind,
                      builder: (ctrl) => Transform.scale(
                        scale: 0.7,
                        child: CupertinoSwitch(
                          value: state.enableRemind,
                          activeColor: ColorConst.accentColor,
                          onChanged: (value) => ctrl.setEnableRemind(value),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 60.h),
                Container(
                  decoration: BoxDecoration(color: Colors.white70, borderRadius: BorderRadius.circular(60.r)),
                  child: Column(
                    children: [
                      ListTile(
                        leading: Container(
                          padding: EdgeInsets.only(top: 35.h),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(LocaleKeys.cycle_calendar_begin_text.ts, style: TextStyle(fontSize: 42.sp)),
                              Text(LocaleKeys.cycle_calendar_begin_tip.ts, style: TextStyle(fontSize: 30.sp, color: Colors.grey)),
                            ],
                          ),
                        ),
                        title: Container(
                          alignment: Alignment.centerRight,
                          child: GetBuilder<CycleCalendarSettingLogic>(
                            id: HomeConst.cycleCalendarSettingStartTime,
                            builder: (ctrl) => Text(
                              ctrl.state.startTime == null ? '' : DateFormat.yMd(Get.locale?.languageCode).format(ctrl.state.startTime!),
                              style: TextStyle(fontSize: 42.sp),
                            ),
                          ),
                        ),
                        // trailing: const Icon(Icons.keyboard_arrow_right),
                        onTap: () => _openPicker(context, LocaleKeys.cycle_calendar_begin_text.ts),
                      ),
                      Divider(height: 0.5.h, color: Colors.grey.withOpacity(0.1)),
                      ListTile(
                        leading: Container(
                          padding: EdgeInsets.only(top: 35.h),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(LocaleKeys.cycle_calendar_duration_text.ts, style: TextStyle(fontSize: 42.sp)),
                              Text(LocaleKeys.cycle_calendar_duration_tip_text.ts, style: TextStyle(fontSize: 30.sp, color: Colors.grey)),
                            ],
                          ),
                        ),
                        title: Container(
                          alignment: Alignment.centerRight,
                          child: GetBuilder<CycleCalendarSettingLogic>(
                            id: HomeConst.cycleCalendarDurationIndex,
                            builder: (ctrl) => Text(state.durationList[state.durationIndex]['label'].toString(), style: TextStyle(fontSize: 42.sp)),
                          ),
                        ),
                        // trailing: const Icon(Icons.keyboard_arrow_right),
                        onTap: () => _openPicker(context, LocaleKeys.cycle_calendar_duration_text.ts),
                      ),
                      Divider(height: 0.5.h, color: Colors.grey.withOpacity(0.1)),
                      ListTile(
                        leading: SizedBox(
                          width: 550.w,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(LocaleKeys.cycle_calendar_period_text.ts, style: TextStyle(fontSize: 42.sp)),
                              Text(LocaleKeys.cycle_calendar_period_tip_text.ts,
                                  style: TextStyle(fontSize: 30.sp, color: Colors.grey, overflow: TextOverflow.ellipsis), maxLines: 2),
                            ],
                          ),
                        ),
                        title: Container(
                          alignment: Alignment.centerRight,
                          child: GetBuilder<CycleCalendarSettingLogic>(
                            id: HomeConst.cycleCalendarSelectedDays,
                            builder: (ctrl) => Text(ctrl.state.periodDays[ctrl.state.periodIndex]['label'].toString(), style: TextStyle(fontSize: 42.sp)),
                          ),
                        ),
                        // trailing: const Icon(Icons.keyboard_arrow_right),
                        onTap: () => _openPicker(context, LocaleKeys.cycle_calendar_period_text.ts),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 300.h),
                GetBuilder<CycleCalendarSettingLogic>(
                  id: 'start_button',
                  builder: (ctrl) => IgnorePointer(
                    ignoring: !ctrl.state.canSyncData,
                    child: GestureDetector(
                      onTap: () => logic.onStartBtnClick(),
                      child: Container(
                        height: 150.h,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: ctrl.state.canSyncData ? Colors.redAccent : Colors.redAccent.withOpacity(.3),
                            borderRadius: BorderRadius.circular(60.r)),
                        child: Text(LocaleKeys.cycle_calendar_start_btn_text.ts, style: const TextStyle(color: Colors.white)),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 96.h),
              ],
            ),
          ),
        ),
      ),
    );
  }

  void _openPicker(BuildContext context, String title) {
    Get.bottomSheet(
      backgroundColor: Colors.white,
      Container(
          height: 850.h,
          decoration: BoxDecoration(
            color: Colors.white70,
            borderRadius: BorderRadius.only(topLeft: Radius.circular(60.r), topRight: Radius.circular(60.r)),
          ),
          child: Column(
            children: [
              SizedBox(height: 20.h),
              Center(child: Text(title)),
              if (title == LocaleKeys.cycle_calendar_begin_text.ts)
                SizedBox(
                  height: 620.h,
                  child: GetBuilder<CycleCalendarSettingLogic>(
                    id: HomeConst.cycleCalendarSettingStartTime,
                    builder: (ctrl) => CupertinoDatePicker(
                      mode: CupertinoDatePickerMode.date,
                      onDateTimeChanged: (value) => ctrl.state.startTime = value,
                      initialDateTime: ctrl.state.startTime,
                      minimumYear: DateTime.now().year,
                      maximumYear: DateTime.now().year,
                    ),
                  ),
                ),
              if (title == LocaleKeys.cycle_calendar_duration_text.ts)
                SizedBox(
                  height: 620.h,
                  child: GetBuilder<CycleCalendarSettingLogic>(
                    id: '',
                    builder: (ctrl) => CupertinoPickerExt(
                      items: state.durationList,
                      backgroundColor: Colors.white,
                      defaultSelectedIndex: state.durationIndex,
                      unit: LocaleKeys.cycle_calendar_period_unit_text.ts,
                      width: 180,
                      itemHeight: 120.h,
                      height: 250,
                      onChanged: (val) => ctrl.durationChange(val),
                    ),
                  ),
                ),
              if (title == LocaleKeys.cycle_calendar_period_text.ts)
                SizedBox(
                  height: 620.h,
                  child: GetBuilder<CycleCalendarSettingLogic>(
                    id: '',
                    builder: (ctrl) => CupertinoPickerExt(
                      items: state.periodDays,
                      backgroundColor: Colors.white,
                      defaultSelectedIndex: state.periodIndex,
                      unit: LocaleKeys.cycle_calendar_period_unit_text.ts,
                      width: 180,
                      itemHeight: 120.h,
                      height: 250,
                      onChanged: (val) => ctrl.periodChange(val),
                    ),
                  ),
                ),
              SizedBox(height: 30.h),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  GestureDetector(
                    onTap: () => Navigator.pop(context),
                    child: Container(
                      alignment: Alignment.center,
                      width: 180.w,
                      height: 80.w,
                      child: Text(LocaleKeys.cancel.ts, style: TextStyle(fontSize: 42.sp)),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      if (title == LocaleKeys.cycle_calendar_begin_text.ts) {
                        logic.setStartTime(state.startTime);
                      }
                      if (title == LocaleKeys.cycle_calendar_duration_text.ts) {
                        logic.setDuration();
                      }
                      if (title == LocaleKeys.cycle_calendar_period_text.ts) {
                        logic.setPeriod();
                      }
                    },
                    child: Container(
                        alignment: Alignment.center,
                        width: 180.w,
                        height: 80.w,
                        child: Text(LocaleKeys.ok.ts, style: TextStyle(fontSize: 42.sp))),
                  ),
                ],
              ),
              SizedBox(height: 30.h),
            ],
          )),
    );
  }
}
